<template>
    <view class="page">
        <view class="page-fixed-top">
            <view class="fixed-item" :class="{'active':TabId==0}" @click="onClickNavitem(0)">
                <view class="title">全部</view>
                <view class="line"></view>
            </view>
            <view class="fixed-item" :class="{'active':TabId==3}" @click="onClickNavitem(3)">
                <view class="title">筛选中</view>
                <view class="line"></view>
            </view>
            <view class="fixed-item" :class="{'active':TabId==2}" @click="onClickNavitem(2)">
                <view class="title">已淘汰</view>
                <view class="line"></view>
            </view>
            <view class="fixed-item" :class="{'active':TabId==1}" @click="onClickNavitem(1)">
                <view class="title">成功对接</view>
                <view class="line"></view>
            </view>
        </view>
        <view class="page-item" v-for="(item, index) in dataList" :key="index" @click="skipNeedsDetail(item.id)">
            <view class="needs-item-top">
                <text class="item-title">{{item.title}}</text>
                <text class="item-status" :class="{'green':item.my_status ==1,'blue':item.my_status==0,'red':item.my_status==2}">{{item.my_status==0?'筛选中':(item.my_status==1?'对接成功':'已淘汰')}}</text>
            </view>
            <view class="needs-item-center">
                <view class="item-content-text">
                    {{item.content}}
                </view>
                <view class="item-content-tip" v-if="item.label_arr.length>0">
                    <view v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</view>
                </view>
                <view class="item-content-img" v-if="item.img_array_url.length>0">
                    <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url" mode="aspectFill" />
                </view>
            </view>
            <view class="needs-item-bottom">
                <view class="item-btn-item">
                    <img :src="File_Url+'eyes-icon.png'" />
                    <text>{{item.browse_num}}</text>
                </view>
                <view class="item-btn-item">
                    <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                    <img :src="File_Url+'collect.png'" v-else/>
                    <text>{{item.attention_num}}</text>
                </view>
                <view class="item-time">
                    {{item.created_at.split(' ')[0]}}
                </view>
            </view>
        </view>
        <view class="null">
            <text v-if="dataList.length>0">没有更多了哦～</text>
            <text v-if="dataList.length==0">没有获取到相应数据哦～</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "buttjointNeeds",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                TabId: 0,
                page: 1,
                dataList: []
            }
        },
        onShow(){
          this.getMyJoinDemandInfo();
        },
        methods:{
            //获取我对接的需求
            async getMyJoinDemandInfo(){
              let params = {
                  user_token: uni.getStorageSync('userToken'),
                  limit: 10,
                  page: this.page,
                  status: this.TabId
              }
              const res = await this.$api.getMyJoinDemandInfo(params);
              if (res.data.level == 'success'){
                  this.dataList = res.data.data
              }
            },
            onClickNavitem(id){
                this.TabId = id;
                this.getMyJoinDemandInfo();
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: calc(100vh - 128rpx);
        padding: 108rpx 0rpx 20rpx 0rpx;
    }
    .list-bottom{
        padding: 23rpx 0;
        @include flex();
        flex-direction: column;
        text{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            color: #B5B5B5;
        }
    }
    .page-item{
        padding: 20rpx 30rpx;
        border-bottom: 2rpx solid #E5E5E5;
        background: #FFFFFF;
        .needs-item-top{
            height: 57rpx;
            @include flex(flex-start);
            flex-direction: row;
            .item-title{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
                font-weight: bold;
            }
            .item-status{
                margin-left: auto;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
            }
            .blue{
                color: #3782FF;
            }
            .green{
                color: #00C735;
            }
            .red{
                color: #FF6565;
            }
        }
        .needs-item-center{
            padding: 10rpx 0rpx 16rpx 0;
            .item-content-text{
                @include ellipsis(3);
                font-size: 26rpx;
                line-height: 37rpx;
                margin-bottom: 16rpx;
            }
            .item-content-tip{
                @include flex(flex-start);
                flex-direction: row;
                view{
                    height: 40rpx;
                    padding: 0 16rpx;
                    background: #3782FF;
                    border-radius: 8rpx;
                    font-size: 26rpx;
                    line-height: 40rpx;
                    margin-right: 10rpx;
                    color: #FFFFFF;
                }
            }
            .item-content-img{
                @include flexWrap(flex-start);
                flex-direction: row;
                padding: 20rpx 0;
                img{
                    width: calc((100% - 36rpx)/3);
                    height: 140rpx;
                    margin: 6rpx;
                    border-radius: 4rpx;
                }
                img:last-child{
                    margin-right: 0;
                }
            }
        }
        .needs-item-bottom{
            @include flex(flex-start);
            flex-direction: row;
            .item-btn-item{
                @include flex();
                flex-direction: row;
                margin-right: 20rpx;
                img{
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }
                text{
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #666666;
                }
            }
            .item-time{
                margin-left: auto;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #666666;
            }
        }
    }
    .page-fixed-top{
        position: fixed;
        top: 0;
        left: 0;
        @include flex(flex-start);
        flex-direction: row;
        background: #FFFFFF;
        width: 100vw;
        .fixed-item{
            width: 25%;
            height: 88rpx;
            @include flex();
            flex-direction: column;
            .title{
                height: 48rpx;
                line-height: 48rpx;
                font-size: 34rpx;
            }
        }
        .fixed-item.active{
            .title{
                height: 80rpx;
                line-height: 80rpx;
                color: #3782FF;
                font-weight: bold;
                font-size: 40rpx;
            }
            .line{
                width: 40rpx;
                height: 8rpx;
                background: #3782FF;
                border-radius: 4rpx;
            }
        }
    }
</style>